<template>
  <div class="c-bg-sgray">
    <div>
      <div class="theme-bg-gradient18000 c-pt30 c-ph24 c-pb64">
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <div class="c-fs32 c-fc-white c-flex-row c-aligni-center" @click="ListDescription=true">打卡数据<div class="iconfont c-fs20 c-fc-white c-ml10">&#xe963;</div></div>
          <div class="c-fs24 c-fc-white c-flex-row c-aligni-center">
            <popup-picker :themeColor="$getThemeColor()" class="selectPicker c-mr10 c-flex-grow1" title="" style="c-w100" v-model="selectItemTime" :data="selectTittle" @on-change="changeSelectTime"></popup-picker>
            <span class="iconfont c-fs18 c-fc-white c-ml4 c-inlineblack">&#xe908;</span>
          </div>
        </div>
        <div class="c-flex-row c-justify-sa c-aligni-center c-bg-white c-pv18 c-br20 c-mt20 c-textAlign-c">
          <div>
            <div class="c-fs26 c-fc-xblack c-fw-b">{{noSignNum}}</div>
            <div class="c-fs20 c-fc-sblack">未打卡</div>
          </div>
          <div>
            <div class="c-fs26 c-fc-xblack c-fw-b">{{signNum}}</div>
            <div class="c-fs20 c-fc-sblack">已打卡</div>
          </div>
          <div>
            <div class="c-fs26 c-fc-xblack c-fw-b">{{hadCommentNum}}</div>
            <div class="c-fs20 c-fc-sblack">已点评</div>
          </div>
          <div>
            <div class="c-fs26 c-fc-xblack c-fw-b">{{hadNotCommentNum}}</div>
            <div class="c-fs20 c-fc-sblack">未点评</div>
          </div>
        </div>
      </div>
      <div class="c-flex-row c-justify-sb c-aligni-center c-mt-64">
        <div class="c-flex-row c-fs28 c-fc-gray c-textAlign-c">
          <div class="c-ph24 c-mt30 c-mb30 c-p c-lh28" v-for="(item, index) in tabList" :key="index" @click="tabtag(index)" :class="tabIndex == index ? 'c-fc-xblack c-fw600' : ''">
            {{item.name}}
            <div class="c-hh16 c-ww72 theme-bg-50 c-pa c-br8 c-p-l0 c-p-r0 c-center c-p-b-6" v-if="tabIndex == index"></div>
          </div>
        </div>
        <div class="c-fs22 c-fc-sblack c-pr24">{{workType==2?"全部作业(" + topData.homeworkNum + ")":workType==3?"全部关卡(" + topData.homeworkNum +")":""}}</div>
      </div>
      <div class="c-ph30 c-pt10 c-pb50">
        <div class="c-bg-white c-pb40 c-br20 c-text-hidden c-contexty-scroll c-maxh760" id="scrollModal" @scroll="onMemberScroll">
          <div class="c-ph22 c-pt40 c-bg-white c-flex-row c-aligni-center" v-for="(item, index) in rankList" :key="index">
            <img class="c-ww68 c-hh68 c-brp50" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="" />
            <div class="c-fs20 c-fc-gray c-flex-column c-flex-grow1 c-ml20">
              <div class="c-fs24 c-fc-xblack">{{item.nickname}}</div>
              <div class="c-flex-row c-justify-sb c-aligni-center ">
                <div>
                  <div class="c-mt6 c-text-ellipsis1 c-ww180" v-if="item.realName">真名:{{item.realName}}加入</div>
                </div>
                <div class="c-mt6" v-if="item.createdAt">{{item.createdAt}}打卡</div>
              </div>
            </div>
          </div>
          <loading-status-tem :noData="rankList.length==0" :dataStatus="dataStatus" noDataText="暂无数据"></loading-status-tem>
        </div>
      </div>
    </div>
    <cj-popup v-model="ListDescription" round closeable>
      <div class="c-flex-column c-bg-white c-pb40 c-br20 c-p c-ww480 c-text-hidden c-ph40 c-textAlign-c">
        <div class="c-fs28 c-fc-xblack c-pt52 c-fw-b">打卡数据说明</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt40 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>未打卡</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">指该统计时间内参与学员中对打卡任务都未打卡的学员人数</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt20 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>已打卡</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">指该统计时间内参与学员中对打卡任务都已打卡的学员人数</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt20 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>已点评</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">老师在该统计时间内对已经打卡的记录有点评的数量</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt20 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>未点评</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">老师在该统计时间内对已经打卡的记录没有去点评的数量</div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index'
export default {
  name: "RankList",
  components: {
    loadingStatusTem,
    PopupPicker
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      tabList: [
        {name:"未打卡"},
        {name:"已打卡"},
      ],
      selectTittle: [],
      selectItemTime: [],
      tabIndex: 0,
      rankList: [],
      page: 1,
      sortType: 1,
      clockId: '', //打卡ID
      hadCommentNum: 0,
      hadNotCommentNum: 0,
      noSignNum: 0,
      signNum: 0,
      curTime: utilJs.dateFormat(new Date().getTime()),
      timeType: 1,
      name: '',
      sharePic: '',
      shareDesc: '',
      ListDescription:false
    };
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
    selectTittle: function (val) {
      this.selectItemTime = val.length > 0 && [val[0][0]];
    },
  },
  methods: {
    changeSelectTime(val) {
      this.selectItemTime = val
      if (this.selectItemTime == "今日实时") { //1=今日；2=近7日；3=近30天
        this.timeType = 1
      } else if (this.selectItemTime == "近7天") {
          this.timeType = 2
      } else if (this.selectItemTime == "近30天") {
          this.timeType = 21
      }
      this.dataStatus = 'HAS_MORE_DATA'
      this.rankList = []
      this.page = 1
      this.signStat()
      this.getRankList();
    },
    //是否滚到底部
    checkScrollBottom(curDom) {
      if (curDom.scrollTop + curDom.clientHeight >= curDom.scrollHeight - 5) {
        return true;
      } else {
        return false;
      }
    },
    onMemberScroll() {
      let domScroll = document.getElementById('scrollModal')
      if (this.checkScrollBottom(domScroll) && this.dataStatus == 'HAS_MORE_DATA' && this.rankList.length != 0) {
        this.getRankList()
      }
    },
    tabtag(index) {
      this.tabIndex = index
      if (this.tabIndex == 0) {
        this.sortType = 1
      } else if (this.tabIndex == 1) {
        this.sortType = 2
      }
      this.page = 1
      this.getRankList()
    },
    //获取头部统计
    signStat() {
      let getUrl = "signCard/signStat?signColId=" + this.clockId + '&timeType=' + this.timeType
      utilJs.getMethod(
        global.apiurl + getUrl,
        res => {
          if (res.length == 0) {
            this.$routerGo(this, "replace", {
              path: "/homePage/clockIn/clockInDetail",
              query: {
                clockInId: this.clockId
              }
            });
            return
          }
          this.hadCommentNum = res.hadCommentNum
          this.hadNotCommentNum = res.hadNotCommentNum
          this.noSignNum = res.noSignNum
          this.signNum = res.signNum
          this.name = res.name
          this.sharePic = res.sharePic
          this.shareDesc = res.shareDesc
          this.wechatShare();
        },
        failRes => {
        }
      );
    },
    //获取排行榜
    getRankList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let getUrl = "signCard/signPeopleList?signColId=" + this.clockId + "&page=" + this.page + '&type=' + this.sortType + '&limit=10' + '&timeType=' + this.timeType
      utilJs.getMethod(
        global.apiurl + getUrl,
        res => {
          if (this.page == 1) {
            this.rankList = res.data;
          } else {
            this.rankList = [...this.rankList, ...res.data];
          }
          if (res.data && (res.data < 10)) {
            this.dataStatus = this.page == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            this.page++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare() {
      let title = this.name;
      let shareImg = this.sharePic;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${this.clockInId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.shareDesc || "点击查看详情";
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      localStorage.setItem("homeWorkShareInfo", JSON.stringify(shareData));
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare() {
      let title = this.name;
      let shareImg = this.sharePic;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${this.clockInId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.shareDesc || "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  mounted() {
    setDocumentTitle("打卡统计");// eslint-disable-line
    this.tabIndex = 0
    this.clockId = this.$route.query.clockInId;
    this.dataStatus = 'HAS_MORE_DATA'
    this.rankList = [],
    this.page = 1,
    this.sortType = 1,
    this.selectTittle = []
    this.nameArr = ['今日实时', '近7天', '近30天']
    this.selectTittle.push(this.nameArr)
    // this.signStat()
    // this.getRankList();
  },
  destroyed() {
    this.selectItemTime = []
    this.dataStatus = 'HAS_MORE_DATA'
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.c-mt-64{
  margin-top: -1.6rem;
}
.selectPicker >>> .weui-cell__ft {
  padding: 0 !important;
}
.selectPicker >>> .weui-cell {
  padding: 0 !important;
}
.selectPicker >>> .weui-cell__ft:after {
  display: none !important;
}
.selectPicker >>> .vux-cell-value{
  color: #ffffff;
}
.c-p-b-6{
  bottom: -0.15rem;
}
</style>
